<template>
  <div class="index-content">
    <div class="img-wrap">
      <img class="img" src="@/assets/images/chatini_img.png" />
    </div>
    <div class="question-wrap">
      <div class="title-wrap">
        <div class="title" v-for="(item, index) in titles" :key="index" @click="newQuestion(item)">
          <img class="content-img" :src="imgs[index % 3]" alt="" />
          <a class="title-a" href="javascript:;">{{ item.descriptive }}</a>
        </div>
      </div>
      <div class="title-wrap">
        <div class="title" v-for="(item, index) in titles" :key="index" @click="newQuestion(item)">
          <img class="content-img" :src="imgs[index % 3]" alt="" />
          <a class="title-a" href="javascript:;">{{ item.descriptive }}</a>
        </div>
      </div>
    </div>
    <div class="question-wrap">
      <div class="title-wrap">
        <div class="title" v-for="(item, index) in titles1" :key="index" @click="newQuestion(item)">
          <img class="content-img" :src="imgs[index % 3]" alt="" />
          <a class="title-a" href="javascript:;">{{ item.descriptive }}</a>
        </div>
      </div>
      <div class="title-wrap">
        <div class="title" v-for="(item, index) in titles1" :key="index" @click="newQuestion(item)">
          <img class="content-img" :src="imgs[index % 3]" alt="" />
          <a class="title-a" href="javascript:;">{{ item.descriptive }}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRandIndicator, getUsrOrg } from '@/api/chartdb'
import icon_refresh_light from '@/assets/images/huan.png'
import icon_refresh_dark from '@/assets/images/icon_refresh_dark.png'
export default {
  props: ['isClick'],
  setup() {
    //动态加载css
    let cssPath = ''
    let mode = localStorage.getItem('mode')
    if (mode == 'dark') {
      cssPath = import('/src/assets/css/dark/index.scss')
    } else if (mode == 'light') {
      cssPath = import('/src/assets/css/light/index.scss')
    }
    return {
      cssPath
    }
  },
  data() {
    return {
      titles: [],
      titles1: [],
      content: '',
      loginOrgName: '',
      orgLeave: '',
      count: 1,
      img: {
        icon_refresh:
          localStorage.getItem('mode') == 'dark' ? icon_refresh_dark : icon_refresh_light
      },
      mode: localStorage.getItem('mode'),
      imgs: [
        '/src/assets/images/suspension/qu0.png',
        '/src/assets/images/suspension/qu1.png',
        '/src/assets/images/suspension/qu2.png'
      ]
    }
  },

  async mounted() {
    await this.changeText()
    await this.changeText()
    const unmae = localStorage.getItem('uname')
    this.userAccount = unmae
    // getUsrOrg({ account: unmae, type: '1' }).then((res) => {
    //   var rsp = res
    //   if (rsp.data.code == 200) {
    //     var orgs = rsp.data.data
    //     this.loginOrgName = orgs.orgName
    //     this.orgLeave = orgs.orgLeave
    //   }
    // })
  },
  methods: {
    newQuestion(item) {
      if (this.isClick) {
        this.$emit('message', item.descriptive)
      }
    },
    changeCount() {
      if (this.count == 3) {
        this.count = 1
      } else {
        this.count++
      }
    },
    async changeText() {
      await getRandIndicator({
        count:this.count,
      }).then((res) => {
        if (this.count == 1) {
          this.titles = res.data.data
        } else {
          this.titles1 = res.data.data
        }
        this.changeCount()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-content {
  width: 100%;
}

.img-wrap {
  margin-top: -80px;
  .img {
    width: 100%;
  }
}
@keyframes marquee {
  to {
    translate: calc(-100% - var(--gap)) 0;
  }
}

.question-wrap {
  --gap: 10px;
  display: flex;
  margin: 0 auto;
  width: 90%;
  overflow: hidden;
  font-size: 16px;
  gap: var(--gap);
  mask: linear-gradient(90deg, #0000, #000 5% 95%, #0000);
  .title-wrap {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: marquee 50s linear infinite running;
  }
}
.question-wrap:hover .title-wrap {
  animation-play-state: paused;
}

.title-wrap1 {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: marquee 40s infinite running;
  animation-direction: reverse;
}
</style>
